<template>
  <div class="multi-measure-renderer">
    <!-- 设计模式 -->
    <div v-if="mode === 'design'" class="design-preview">
      <div class="preview-header">
        <span class="param-name">{{ displayName }}</span>
        <span class="measure-count">({{ measureCount }}次测量)</span>
      </div>
      <div class="measure-list">
        <div v-for="i in measureCount" :key="i" class="measure-item">
          <span class="measure-index">第{{ i }}次</span>
          <span class="measure-value">测量值</span>
          <span v-if="paramConfig?.unit" class="measure-unit">{{ paramConfig.unit }}</span>
        </div>
      </div>
      <div v-if="showStatistics" class="statistics-preview">
        <span>均值：{{ calculateMean([]) }}</span>
        <span>标准差：{{ calculateStdDev([]) }}</span>
      </div>
    </div>
    
    <!-- 预览和生成模式 -->
    <div v-else class="runtime-display">
      <div class="measure-header">
        <span class="param-name">{{ displayName }}</span>
      </div>
      
      <div class="measure-values">
        <div v-for="(value, index) in measureValues" :key="index" class="measure-row">
          <span class="measure-label">第{{ index + 1 }}次：</span>
          <span class="measure-value">{{ formatValue(value) }}</span>
          <span v-if="paramConfig?.unit" class="measure-unit">{{ paramConfig.unit }}</span>
        </div>
      </div>
      
      <div v-if="showStatistics && measureValues.length > 0" class="statistics">
        <div class="stat-item">
          <span class="stat-label">平均值：</span>
          <span class="stat-value">{{ calculateMean(measureValues) }}</span>
          <span v-if="paramConfig?.unit" class="stat-unit">{{ paramConfig.unit }}</span>
        </div>
        <div v-if="measureValues.length > 1" class="stat-item">
          <span class="stat-label">标准差：</span>
          <span class="stat-value">{{ calculateStdDev(measureValues) }}</span>
          <span v-if="paramConfig?.unit" class="stat-unit">{{ paramConfig.unit }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { findParamByCode } from '@/utils/tools'

export default {
  name: 'MultiMeasureRenderer',
  props: {
    component: {
      type: Object,
      required: true
    },
    config: {
      type: Object,
      default: () => ({})
    },
    mode: {
      type: String,
      default: 'design'
    },
    testData: {
      type: Object,
      default: () => ({})
    }
  },
  computed: {
    paramConfig() {
      const { content = {} } = this.component
      return findParamByCode(content.paramCode, this.config.paramGroups)
    },
    
    displayName() {
      const { content = {} } = this.component
      return content.displayName || this.paramConfig?.paramName || this.component.content?.paramCode || '多测次参数'
    },
    
    measureCount() {
      return this.paramConfig?.multiMeasureCount || 3
    },
    
    showStatistics() {
      return this.component.content?.showStatistics !== false
    },
    
    measureValues() {
      const { content = {} } = this.component
      if (this.mode === 'design') {
        return Array(this.measureCount).fill(0)
      }
      
      const values = this.testData[content.paramCode]
      return Array.isArray(values) ? values : Array(this.measureCount).fill(null)
    }
  },
  methods: {
    formatValue(value) {
      if (value === null || value === undefined) return '-'
      
      if (this.paramConfig?.dataType === 'number') {
        const precision = this.component.content?.precision ?? this.paramConfig?.precision ?? 2
        return Number(value).toFixed(precision)
      }
      
      return value
    },
    
    calculateMean(values) {
      const numericValues = values
        .map(v => Number(v))
        .filter(v => !isNaN(v))
      
      if (numericValues.length === 0) return '-'
      
      const sum = numericValues.reduce((acc, val) => acc + val, 0)
      const mean = sum / numericValues.length
      
      const precision = this.component.content?.precision ?? this.paramConfig?.precision ?? 2
      return mean.toFixed(precision)
    },
    
    calculateStdDev(values) {
      const numericValues = values
        .map(v => Number(v))
        .filter(v => !isNaN(v))
      
      if (numericValues.length <= 1) return '-'
      
      const mean = numericValues.reduce((acc, val) => acc + val, 0) / numericValues.length
      const squareDiffs = numericValues.map(value => Math.pow(value - mean, 2))
      const avgSquareDiff = squareDiffs.reduce((acc, val) => acc + val, 0) / numericValues.length
      const stdDev = Math.sqrt(avgSquareDiff)
      
      const precision = this.component.content?.precision ?? this.paramConfig?.precision ?? 2
      return stdDev.toFixed(precision)
    }
  }
}
</script>

<style scoped>
.multi-measure-renderer {
  width: 100%;
  height: 100%;
  padding: 8px;
  box-sizing: border-box;
}

.design-preview {
  color: #666;
  font-style: italic;
}

.preview-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.param-name {
  font-weight: 500;
}

.measure-count {
  font-size: 0.9em;
  color: #999;
}

.measure-list {
  margin-bottom: 8px;
}

.measure-item {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  padding: 2px 4px;
  background: #f5f5f5;
  border-radius: 2px;
}

.measure-index {
  font-size: 0.9em;
  color: #666;
  min-width: 40px;
}

.measure-value {
  flex: 1;
}

.measure-unit {
  color: #999;
  font-size: 0.9em;
}

.statistics-preview {
  display: flex;
  gap: 16px;
  font-size: 0.9em;
  color: #666;
  padding-top: 8px;
  border-top: 1px dashed #ddd;
}

.runtime-display {
  width: 100%;
}

.measure-header {
  margin-bottom: 8px;
  font-weight: 500;
}

.measure-values {
  margin-bottom: 12px;
}

.measure-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  padding: 2px 0;
}

.measure-label {
  min-width: 60px;
  font-size: 0.9em;
  color: #666;
}

.measure-value {
  font-weight: 500;
  min-width: 60px;
}

.statistics {
  padding-top: 8px;
  border-top: 1px solid #e8e8e8;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 0.9em;
  color: #666;
  min-width: 60px;
}

.stat-value {
  font-weight: bold;
  min-width: 60px;
}

.stat-unit {
  color: #666;
  font-size: 0.9em;
}
</style>